<template>
  <div>
    <Card class="card_chried">
      <div class="inputBox">
        素材文案
        <div class="inputConter">
          <el-input
            v-model.trim="searchFrom.copywrite"
            placeholder="请输入"
            clearable
          ></el-input>
        </div>
      </div>
      <div class="inputBox">
        发布时间（开始）
        <div class="inputConter">
          <date-time-picker
            @dataChange="pickerChange"
            ref="createTime"
          ></date-time-picker>
        </div>
      </div>
      <div class="inputBox">
        发布时间（结束）
        <div class="inputConter">
          <date-time-picker
            @dataChange="pickerChangeOver"
            ref="overTime"
          ></date-time-picker>
        </div>
      </div>
      <div class="inputBox">
        请选择标签
        <div class="inputConter">
          <el-select
            v-model="searchFrom.label"
            placeholder="请选择"
            @change="labelChange"
            clearable
          >
            <el-option
              v-for="item in label"
              :key="item.blable_id"
              :label="item.blable_name"
              :value="item.blable_name"
            >
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="edit_box">
        <button-cn
          text="查询"
          class="button_click"
          @myclick="query"
        ></button-cn>
        <button-cn
          text="重置"
          class="button_click"
          @myclick="Reset"
        ></button-cn>
      </div>
    </Card>
    <div style="height: 100px; line-height: 100px; width: 95%; margin: 0 auto">
      <span> 素材列表列表 </span>
      <button-cn
        text="新增标签"
        @myclick="pushbrand"
        style="float: right; margin-right: 45px"
      ></button-cn>
      <button-cn
        text="新增素材"
        @myclick="NewBrandsAlert = true"
        style="float: right; margin-right: 45px"
      ></button-cn>
    </div>

    <Card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="文案" align="center">
          <template slot-scope="scope">
            <div class="text_">
              {{ scope.row.brandambassadortask_copywrite }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="图片素材" align="center" width="150">
          <template
            slot-scope="scope"
            v-if="scope.row.brandambassadortask_type == 1"
          >
            <button-cn
              text="点击查看"
              @myclick="lookImg(scope.row.brandambassadortask_imgurl)"
            ></button-cn>
          </template>
          <template v-else> 公众号 </template>
        </el-table-column>
        <el-table-column label="品牌大使任务分类" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.brandambassadortask_type == 1">图文</span>
            <span v-if="scope.row.brandambassadortask_type == 2">公众号</span>
          </template>
        </el-table-column>
        <el-table-column label="显示状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.brandambassadortask_state == 1"
              ><el-tag type="success">显示</el-tag></span
            >
            <span v-if="scope.row.brandambassadortask_state == 2"
              ><el-tag type="danger">隐藏</el-tag></span
            >
          </template>
        </el-table-column>

        <el-table-column
          prop="brandambassadortask_createtime"
          label="发布时间
"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="公众号跳转链接
"
          align="center"
        >
          <template slot-scope="scope">
            <a
              v-if="scope.row.brandambassadortask_url"
              :href="scope.row.brandambassadortask_url"
              target="_block"
              >点击查看</a
            >
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="公众号标题
"
        >
          <template slot-scope="scope">
            <div class="text_">
              {{ scope.row.brandambassadortask_title }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="公众号封面图
"
        >
          <template slot-scope="scope">
            <img
              :src="scope.row.brandambassadortask_coverimg"
              alt=""
              style="width: 100%"
            />
          </template>
        </el-table-column>
        <el-table-column label="标签" align="center">
          <template slot-scope="scope">
            <div
              v-for="(item, index) of arrlenThere(scope.row.lable)"
              :key="index"
              style="width: 100%; text-align: center"
            >
              <div>
                {{ item }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="downloadNumber" label="下载数" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center" width="280">
          <template slot-scope="scope">
            <div style="display: inline-block">
              <button-cn
                text="查看详情"
                @myclick="lookdetails(scope.row.brandambassadortask_id)"
              ></button-cn>
            </div>
            <div style="display: inline-block; margin-left: 20px">
              <button-cn
                text="消息推送"
                @myclick="pushmessage(scope.row.brandambassadortask_id)"
              ></button-cn>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </Card>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="count"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <AlertCn
      :alertShow="themeISshow"
      title="数据详情"
      rightText="确认"
      leftText="取消"
      @clone="themeISshow = false"
      @cancel="themeISshow = false"
      @confirm="submintData"
    >
      <el-form :model="Objdetails" label-width="120px">
        <el-form-item label="文案">
          <el-input
            type="textarea"
            autosize
            v-model="Objdetails.brandambassadortask_copywrite"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="图片素材"
          v-if="Objdetails.brandambassadortask_type == 1"
        >
          <button-cn
            text="点击查看"
            @myclick="lookImg(Objdetails.brandambassadortask_imgurl)"
          ></button-cn>
        </el-form-item>
        <el-form-item label="分类">
          <span>{{
            Objdetails.brandambassadortask_type == 1 ? "图文" : "公众号"
          }}</span>
        </el-form-item>

        <el-form-item label="展示权限">
          <el-select
            v-model="Rote"
            placeholder="请选择"
            @change="DisplaypermissionMaster"
          >
            <el-option
              v-for="item in Displaypermission"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="显示状态">
          <el-select
            v-model="Objdetails.brandambassadortask_state"
            placeholder="请选择"
            @change="stateChange_vm"
          >
            <el-option
              v-for="item in detailsIshow"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布时间">
          {{ Objdetails.brandambassadortask_createtime }}
        </el-form-item>
        <el-form-item
          label="公众号跳转链接"
          v-if="Objdetails.brandambassadortask_type == 2"
        >
          <el-input v-model="Objdetails.brandambassadortask_url"></el-input>
        </el-form-item>
        <el-form-item
          label="公众号标题"
          v-if="Objdetails.brandambassadortask_type == 2"
        >
          <el-input v-model="Objdetails.brandambassadortask_title"></el-input>
        </el-form-item>
        <el-form-item
          label="公众号封面图"
          v-if="Objdetails.brandambassadortask_type == 2"
        >
          <img
            :src="Objdetails.brandambassadortask_coverimg"
            alt=""
            style="height: 200px"
          />
        </el-form-item>
        <el-form-item label="标签">
          <el-select
            v-model="Objdetails.lable"
            multiple
            placeholder="请选择"
            @change="checkoutselect"
          >
            <el-option
              v-for="item in label"
              :key="item.blable_id"
              :label="item.blable_name"
              :value="item.blable_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下载数">
          {{ Objdetails.downloadNumber }}次
        </el-form-item>
      </el-form>
    </AlertCn>
    <AlertCn
      :alertShow="imgDataShow"
      title="查看图片"
      rightText="确认"
      leftText="取消"
      @clone="imgDataShow = false"
      @cancel="imgDataShow = false"
      @confirm="imgDataShow = false"
    >
      <el-carousel :interval="4000" type="card" height="800px">
        <el-carousel-item v-for="(item, index) in look_imgdata" :key="index">
          <img :src="item" alt="" style="width: 100%" />
        </el-carousel-item>
      </el-carousel>
    </AlertCn>
    <AlertCn
      :alertShow="labelIsShow"
      title="添加标签"
      rightText="确认"
      leftText="取消"
      @clone="labelIsShow = false"
      @cancel="labelIsShow = false"
      @confirm="labelPushSubmit"
    >
      标签名称
      <div style="display: inline-block; width: 80%">
        <el-input
          placeholder="请输入标签名称"
          v-model.trim="labelName"
          clearable
        >
        </el-input>
      </div>
    </AlertCn>
    <AlertCn
      :alertShow="NewBrandsAlert"
      title="新增品牌"
      rightText="确认增加"
      leftText="取消"
      @clone="alerPushShow"
      @cancel="alerPushShow"
      @confirm="submintNewBrandsAlert"
    >
      <el-form :model="brandObject" label-width="120px">
        <el-form-item label="文案内容">
          <el-input
            v-model="brandObject.copywrite"
            type="textarea"
            :rows="2"
          ></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-radio v-model="brandObject.type" label="1" @change="radioChange"
            >原创</el-radio
          >
          <el-radio v-model="brandObject.type" label="2" @change="radioChange"
            >公众号</el-radio
          >
        </el-form-item>

        <el-form-item label="图片素材" v-show="brandObject.type == '1'">
          <el-upload
            action="https://m.asmm.vip/index.php/index/Brandambassadortask/uploadming"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="PictureMaterial"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>

        <el-form-item label="公众号跳转链接" v-show="brandObject.type == '2'">
          <el-input v-model="brandObject.url"></el-input>
        </el-form-item>
        <el-form-item label="	公众号标题" v-show="brandObject.type == '2'">
          <el-input v-model="brandObject.title"></el-input>
        </el-form-item>
        <el-form-item label="公众号封面" v-show="brandObject.type == '2'">
          <!-- <imgupload
            imgurl="https://m.asmm.vip/index.php/index/Brandambassadortask/uploadming"
            @imgsucc="sharecoverimgsucc"
            ref="imguploada"
          ></imgupload> -->
          <imgupload @imgsucc="sharecoverimgsucc" ref="imguploada"></imgupload>
        </el-form-item>

        <el-form-item label="展示权限">
          <el-select
            v-model="brandObject.displayrole"
            placeholder="请选择"
            @change="jurisdiction"
            name="select"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="任务标签表">
          <el-select
            v-model="brandObject.label"
            placeholder="请选择"
            multiple
            @change="addselectList"
          >
            <el-option
              v-for="item in taglist"
              :key="item.blable_id"
              :label="item.blable_name"
              :value="item.blable_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </AlertCn>
  </div>
</template>

<script>
import Card from "@/components/from/card.vue";
import ButtonCn from "@/components/from/button-cn.vue";
import DateTimePicker from "@/components/from/DateTimePicker.vue";
import imgupload from "@/components/from/imgupload.vue";
import {
  Brandambassadortask,
  fungetlablelist,
  getTextDatadetails,
  pushLabelMethod,
  addbrandambassadortask,
  modifybrandambassadortask,
  pushmessagefun,
} from "@/request/index";
import AlertCn from "@/components/from/alert-cn.vue";
export default {
  data() {
    return {
      labelIsShow: false,
      searchFrom: {
        copywrite: "",
        starttime: "",
        endtime: "",
        label: "",
      },
      page: 1,
      count: 10,
      tableData: [],
      Objdetails: {},
      label: [],
      total: 0,
      themeISshow: false,
      imgDataShow: false,
      look_imgdata: [],
      labelName: "",
      labelFrom: {
        labelupDate: "",
        labIsShow: "1",
      },
      surface_id: 0,
      optionsStatus: [
        {
          value: "1",
          label: "显示",
        },
        {
          value: "2",
          label: "隐藏",
        },
      ],
      NewBrandsAlert: false,
      brandObject: {
        copywrite: "",
        imgurl: [],
        url: "",
        title: "",
        coverimg: "",
        type: "1",
        displayrole: "2",
        label: "",
      },
      dialogImageUrl: "",
      dialogVisible: false,
      options: [
        {
          value: "1",
          label: "普通",
        },
        {
          value: "2",
          label: "品牌大使",
        },
      ],
      detailsIshow: [
        {
          value: 1,
          label: "显示",
        },
        {
          value: 2,
          label: "隐藏",
        },
      ],
      taglist: [],
      Rote: null,
      Displaypermission: [
        {
          value: "1",
          label: "普通",
        },
        {
          value: "2",
          label: "品牌大使",
        },
      ],
    };
  },
  components: { Card, ButtonCn, DateTimePicker, AlertCn, imgupload },
  created() {
    this.funbassadortask();
    this.gettagsFun();
  },
  methods: {
    pushmessage(id) { 
      pushmessagefun(id).then((res) => {
        if (res.code != "0000") return this.$message.error(res.msg);
        this.$meaage.success(res.msg);
      });
    },
    arrlenThere(arr) {
      return arr.slice(0, 3);
    },
    checkoutselect(data) {
      this.Objdetails.lable = data;
    },
    DisplaypermissionMaster(value) {
      this.Rote = value;
      console.log(this.Rote);
    },
    PictureMaterial(img, type, imglist) {
      if (img.code !== "0000") return this.$message.error(img.msg);
      if (img.code === "0000") this.brandObject.imgurl.push(img.data.url);
    },
    jurisdiction(value, e) {
      console.log(value, e);
      this.brandObject.displayrole = value;
    },
    displayroleVluae(value) {
      this.brandObject.type = value;
    },
    addselectList(labelList) {
      this.brandObject.label = labelList;
      console.log(this.brandObject);
    },
    radioChange(redico) {
      this.brandObject.type = redico;
      console.log(redico);
    },
    sharecoverimgsucc(img) {
      this.brandObject.coverimg = img;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    submintNewBrandsAlert() {
      var label = this.brandObject.label
        .sort(function (a, b) {
          if (a > b) {
            return 1;
          } else {
            return -1;
          }
        })
        .toString();
      addbrandambassadortask(
        this.brandObject.copywrite,
        this.brandObject.imgurl.toString(),
        this.brandObject.url,
        this.brandObject.title,
        this.brandObject.coverimg.toString(),
        this.brandObject.type,
        this.brandObject.displayrole,
        label
      ).then((res) => {
        // console.log(res);
        if (res.code != "0000") return this.$message.error(res.msg);
        this.$message.success(res.msg);
      });
      console.log(this.brandObject);
      this.funbassadortask();
      this.alerPushShow();
    },
    alerPushShow() {
      this.NewBrandsAlert = false;
      this.brandObject.copywrite = "";
      this.brandObject.imgurl = [];
      this.brandObject.url = "";
      this.brandObject.title = "";
      this.brandObject.coverimg = "";
      this.brandObject.type = "1";
      this.brandObject.displayrole = "2";
      this.brandObject.label = "";
    },

    labelPushSubmit() {
      if (this.labelName > 6)
        return this.$message.error("标签名称不得超过6个字符");
      pushLabelMethod(this.labelName).then((res) => {
        // console.log(res);
        if (res.code !== "0000") return this.$message.error(res.msg);
        this.$message.success(res.msg);
        this.labelIsShow = false;
        // this.funbassadortask();
        this.label = [];
        this.taglist;
        this.gettagsFun();
      });
    },

    //查看图片
    lookImg(imgData) {
      this.imgDataShow = true;
      // console.log(imgData);
      this.look_imgdata = imgData;
    },
    stateChange_vm(value) {
      this.Objdetails.brandambassadortask_state = value;
    },
    // 确认修改
    submintData() {
      modifybrandambassadortask(
        this.Objdetails.brandambassadortask_copywrite,
        this.Objdetails.brandambassadortask_imgurl,
        this.Objdetails.brandambassadortask_url,
        this.Objdetails.brandambassadortask_title,
        this.Objdetails.brandambassadortask_coverimg,
        this.Rote,
        this.Objdetails.lable.toString(),
        this.Objdetails.brandambassadortask_state,
        this.Objdetails.brandambassadortask_id
      ).then((res) => {
        if (res.code !== "0000") return this.$message.error(res.msg);
        this.$message.success(res.msg);
        this.themeISshow = false;
        this.funbassadortask();
      });
    },
    labelChange(index) {
      this.searchFrom.label = index;
      console.log(index);
    },
    gettagsFun() {
      var username = window.sessionStorage.getItem("name");
      var password = window.sessionStorage.getItem("password");
      fungetlablelist(username, password, null).then((res) => {
        if (res.code !== "0000") return this.$message.error(res.msg);
        for (var item in res.data) {
          this.label.push(res.data[item]);
          this.taglist.push(res.data[item]);
        }
      });
    },
    lookdetails(id) {
      getTextDatadetails(id).then((res) => {
        if (res.code !== "0000") return this.$message.error(res.msg);
        this.themeISshow = true;
        this.Objdetails = res.data[0];
      });
    },
    pickerChange(getItem) {
      this.searchFrom.starttime = getItem;
    },
    pickerChangeOver(overItem) {
      this.searchFrom.endtime = overItem;
    },
    funbassadortask() {
      Brandambassadortask(
        this.searchFrom.copywrite,
        this.searchFrom.starttime,
        this.searchFrom.endtime,
        this.searchFrom.label,
        this.count,
        this.page
      ).then((res) => {
        this.tableData = [];
        console.log(this.count, this.page, res.data.data);
        if (res.code !== "0000") return this.$message.error(res.msg);
        // console.log(res);
        this.total = res.data.total;
        this.tableData = res.data.data;
      });
    },
    handleSizeChange(val) {
      this.count = val;
      console.log(this.count);
      this.funbassadortask();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.funbassadortask();
    },
    query() {
      //
      this.funbassadortask();
    },
    Reset() {
      this.page = 1;
      this.count = 10;
      for (var item in this.searchFrom) {
        this.searchFrom[item] = "";
      }
      this.$refs.overTime.endtime = "";
      // this.$refs.overTime.createTime = "";
      this.$refs.createTime.endtime = "";
    },
    pushbrand() {
      this.labelIsShow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../components/style/init_el_checkout.scss";
.inputBox {
  display: inline-block;
  margin-right: 68px;
  margin-top: 24px;
  .inputConter {
    display: inline-block;
  }
}
::v-deep .has-gutter {
  font-size: 12px;
}
.edit_box {
  float: right;
  margin-top: 24px;
  .button_click {
    display: inline-block;
    margin-right: 20px;
  }
}
.text_ {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}
</style>
